<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="info" v-if="isLogin">
      <div class="top">
        <div class="left">
          <div class="pic">
            <img :src="picURL" alt="" @click="toInfo" />
          </div>
          <div class="txt">
            <div class="username">{{ username }}</div>
            <div class="renzheng">申请认证</div>
          </div>
        </div>
        <div class="right">
          <span class="myicon">
            <van-icon name="clock-o" />
          </span>
          <span class="yuedu">
            今日阅读
            <br />
            5分钟
          </span>
        </div>
      </div>
      <div class="bottom">
        <div class="items">
          <div class="num">{{ dongtai }}</div>
          <div class="item">动态</div>
        </div>
        <div class="items" @click="toMyfans('a')">
          <div class="num">{{ guanzhu + 1 }}</div>
          <div class="item">关注</div>
        </div>
        <div class="items" @click="toMyfans('b')">
          <div class="num">12</div>
          <div class="item">粉丝</div>
        </div>
      </div>
    </div>
    <div class="info" v-else>
      <div class="tologin" @click="toLogin">
        <img src="../../../assets/myphone.png" alt="" />
      </div>
    </div>
    <!-- 收藏 -->
    <div class="zhong">
      <div class="sc">
        <div class="shouc" @click="goCollect('a')">
          <van-icon name="star-o" class="msc" /><br />
          <span>收藏</span>
        </div>
      </div>
      <div class="ls">
        <div class="lishi" @click="goCollect('b')">
          <van-icon name="clock-o" class="mls" /> <br />
          <span>历史</span>
        </div>
      </div>
      <div class="zp">
        <div class="zuop" @click="$router.push('/mywork')">
          <van-icon name="records" class="mzp" /><br />
          <span>作品</span>
        </div>
      </div>
    </div>
    <!-- 其他 -->
    <div class="one">
      <van-cell title="消息通知" is-link @click="$router.push('/message')" />
      <van-cell
        title="实名认证"
        is-link
        @click="$router.push('/authentication')"
      />
    </div>
    <div class="two">
      <van-cell title="用户反馈" is-link @click="$router.push('/suggest')" />
      <van-cell title="小智同学" is-link @click="$router.push('/zhi')" />
      <van-cell title="系统设置" is-link @click="$router.push('/setting')" />
    </div>
    <div class="tuichu">
      <van-button type="danger" size="large" round @click="tuichu"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { getUserData, getfans } from '../../../api/my.js'
import { localGet, localDel } from '@/utils/mylocal.js'
// 导入辅助函数
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      username: '',
      picURL: '',
      dongtai: '',
      guanzhu: '',
      fans: ''
    }
  },
  computed: {
    isLogin () {
      const token = localGet('token')
      if (token) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    toMyfans (type) {
      this.$router.push({
        path: '/myfans',
        query: {
          type
        }
      })
    },
    goCollect (type) {
      this.$router.push({
        path: '/mycollect',
        query: {
          type
        }
      })
    },
    // 获取vuex中的信息
    ...mapMutations(['setUserInfo', 'setIsLogin']),
    // 退出登录
    tuichu () {
      localDel('token')
      this.$router.push('/index')
    },
    // 跳转到个人信息页面
    toInfo () {
      this.$router.push('/info')
    },
    // 登陆跳转
    toLogin () {
      this.$router.push('/login')
    },
    // 获取用户信息方法
    async getData () {
      const res = await getUserData()
      this.setUserInfo(res.data)
      this.setIsLogin(true)
      this.username = res.data.name
      this.picURL = res.data.photo
    },
    // 获取粉丝数量
    async getNum () {
      const res = await getfans()
      this.fans = res.data.fans_count
      this.guanzhu = res.data.follow_count
      this.dongtai = res.data.art_count
    }
  },
  created () {
    this.getData()
    this.getNum()
  }
}
</script>

<style lang="less" scoped>
.my {
  font-size: 14px;
  background-color: #eee;
}
.msc {
  font-size: 28px;
  color: red;
}
.mls {
  font-size: 28px;
  color: orange;
}
.mzp {
  font-size: 28px;
  color: skyblue;
}
.myicon {
  position: relative;
  top: 14px;
  left: 0;
  font-size: 24px;
  color: #e3e3e3;
}

.info {
  width: 100%;
  height: 200px;
  position: relative;
  background-image: url('../../../assets/mybanner.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  .tologin {
    width: 66px;
    height: 66px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 67px;
    left: 155px;
    img {
      width: 26px;
      height: 34px;
      position: absolute;
      left: 20px;
      top: 16px;
    }
  }
  .top {
    padding: 50px 0 0 15px;
    height: 120px;
    .left {
      float: left;
      .pic {
        float: left;
        width: 60px;
        height: 60px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 30px;
        }
      }
      .txt {
        float: right;
        color: #fff;
        margin-left: 12px;
        margin-top: 3px;
        line-height: 26px;
        .renzheng {
          background-color: #fff;
          color: rgb(115, 183, 247);
          font-size: 12px;
          width: 66px;
          padding: 0 7px;
          font-weight: 700;
          border-radius: 20px;
        }
      }
    }
    .right {
      float: right;
      width: 110px;
      height: 55px;
      text-align: right;
      padding-right: 10px;
      margin-top: 6px;
      color: #fff;
      background-color: rgba(56, 128, 200, 0.8);
      border-top-left-radius: 27px;
      border-bottom-left-radius: 27px;
    }
  }
  .bottom {
    height: 80px;
    display: flex;
    justify-content: space-around;
    color: #fff;
    .items {
      text-align: center;
      .num {
        margin-bottom: 6px;
        margin-top: 22px;
      }
    }
  }
}
.zhong {
  width: 100%;
  height: 100px;
  background-color: #fff;
  padding-top: 20px;
  display: flex;
  font-size: 24px;
  justify-content: space-around;
  text-align: center;
  span {
    font-size: 18px;
  }
}
.one {
  margin: 3px 0;
}
.tuichu {
  background-color: #fff;
  padding: 24px 15px;
  margin-top: 2px;
}
</style>
